<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>D3练习</title>
    <script src="https://cdn.bootcss.com/d3/5.15.1/d3.js"></script>
</head>

<body>
    <svg style="width:500px;height:500px;border:1px lightgray solid;">

        <script>
            let p = document.createElement("p")
            p.innerHTML = "这是由js生成的内容"
            document.body.appendChild(p)


            d3.select('body')
                .append("div")
                .text("我是由d3生成的内容")

            d3.select("svg")
                .append("circle")
                .attr("r", 20)
                .attr("cx", 20)
                .attr("cy", 20)
                .style("fill", "red");
            d3.select("svg")
                .append("text")
                .attr("id", "a")
                .attr("x", 20)
                .attr("y", 20)
                .style("opacity", 0)
                .text("HELLO WORLD");
            d3.select("svg")
                .append("circle")
                .attr("r", 100)
                .attr("cx", 400)
                .attr("cy", 400)
                .style("fill", "lightblue");
            d3.select("svg")
                .append("text")
                .attr("id", "b")
                .attr("x", 400)
                .attr("y", 400)
                .style("opacity", 0)
                .text("Uh, hi.");

            d3.selectAll("circle").transition().duration(2000).attr("cy", 200);
        </script>
    </svg>

</body>

</html>
